<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.dropbox{
				width: 300px;
				height: 300px;
				margin: 20px;
    			border: 3px dashed #e6e6e6;
			}
			.area{
				margin: 100px auto;
				width: 100px;
				height: 100px;
				background-repeat: no-repeat;
				background-image: url("");
			}
			
			#preview img{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="dropbox" class="dropbox">
			<div class="area"></div>
		</div>
		<div id="preview"></div>
		
		<script type="text/javascript">
			var dropbox = document.getElementById("dropbox");
			var preview = document.getElementById("preview");
			
			dropbox.addEventListener("dragenter", function(e){
				e.stopPropagation();
			  	e.preventDefault();
			}, false);
			
			dropbox.addEventListener("dragover", function(e){
				e.stopPropagation();
			  	e.preventDefault();
			}, false);
			
			dropbox.addEventListener("drop", function(e){
				e.stopPropagation();
			  	e.preventDefault();
			
			  	var dt = e.dataTransfer;
			  	var files = dt.files;
			  	
			  	for (var i = 0; i < files.length; i++) {
				    var file = files[i];
				    var imageType = /^image\//;
				    
				    if ( !imageType.test(file.type) ) {
				      	continue;
				    }
				    
				    var img = document.createElement("img");
				    img.classList.add("obj");
				    img.file = file;
				    preview.appendChild(img);
				    
				    var reader = new FileReader();
				    reader.onload = (function(aImg) { 
				      return function(e) { 
				        aImg.src = e.target.result; 
				        console.log(e.target.result);
				      }; 
				    })(img);
				    reader.readAsDataURL(file);
				}
			}, false);
		</script>
	</body>
</html>
